<!DOCTYPE html>
<html>
<head>
	<title>pctx.html</title>
	<meta charset="utf-8"/>
	<script src="./bower_components/react/react.js"></script>
	<script src="./bower_components/react/react-dom.js"></script>
	<script src="./bower_components/babel/browser.js"></script>

	<style>
		* {
			margin: 0;
			padding: 0;
			list-style: none;
		}

		.outBOx {
			width: 400px;
			overflow: hidden;
			position: absolute;
			border: 1px solid #ccc;
			left: 50%;
			top: 50%;
			transform: translate(-50%, -50%);
		}

		.topDiv {
			width: 400px;
			height: 200px;
			float: left;
			position: relative;
		}

		.topDiv ul {
			height: 100%;
			position: absolute;
			left: 0;
			top: 0;
			transition: 0.7s;
		}

		.topDiv ul li {
			width: 400px;
			height: 200px;
			float: left;
			background-size: cover;
			background-position: center center;
			overflow:hidden;
		}

		.topDiv li img{
			width: 100%;
			height: 100%;
			transition:0.3s
		}

		.topDiv .leftClick {
			position:absolute;
			z-index: 3;
			left: 3px;
			top: 50%;
			transform:translateY(-50%);
			cursor: pointer;
		}

		.topDiv .rightClick {
			position:absolute;
			z-index: 3;
			right: 3px;
			top: 50%;
			transform:translateY(-50%);
			cursor: pointer;	
		}

		.centerBox {
			width: 100%;
			height: 20px;
			background-color: pink;
			float: left;
			line-height: 20px;
		}

		.center-rightBox {
			float: right;
		}

		.center-leftText {
			margin-left: 10px;
		}

		.center-rightBox span {
			color: black;
			cursor: pointer;
			margin-right: 10px;
		}

		.bottom-Box {
			width: 100%;
			height: 100px;
			float: left;
			position: relative;
		}

		.bottom-Box ul {
			height: 100%;
			position: absolute;
			transition: 0.7s;
		}

		.bottom-Box ul li {
			width: 90px;
			height: 90px;
			border: 5px solid black;
			float: left;
			background-size: cover;
			background-position: center center;
		}

		.bottom-Box ul li.active{
			border-color: yellow;
		}
	</style>
</head>
<body>
	<div id='app'></div>

	<script type="text/babel">

		class TopNode extends React.Component {
			render() {
				let bigs = [];
				this.props.picUrl.forEach((value, index) => {
					bigs.push(<li key={index}><img src={value} style={{transform: 'scale('+ this.props.iScale +')'}}/></li>);
				})

				return (
					<div className="topDiv">
						<div className="leftClick" onClick={this.props.topLeftMove}>左</div>
						<div className="rightClick" onClick={this.props.topRightMove}>右</div>
						<ul style={{width: this.props.picUrl.length * 400 + 'px', left: ((this.props.curIndex*-400) + 'px')}}>
							{bigs}
						</ul>
					</div>
				)
			}
		}

		class CenterNode extends React.Component {
			render() {
				return (
					<div className="centerBox"> 
						<span className="center-leftText">{this.props.picNames[this.props.curIndex]}</span>
						<div className="center-rightBox">
							<span onClick={this.props.topScaleBig}>大</span>
							<span onClick={this.props.topScaleSmall}>小</span>
						</div>
					</div>
				)
			}
		}

		class BottomNode extends React.Component {
			render() {
				let aLi = [];
				this.props.picUrl.forEach((value,index) => {
					aLi.push(<li key={index} onClick={this.props.swiperChange.bind(this, index)} className={index == this.props.curIndex?'active': ''} style={{backgroundImage: 'url(' + value + ')'}}></li>);
				})

				return (
					<div className="bottom-Box">
						<ul style={{width: this.props.picUrl.length * 100 + 'px', left: (this.props.curIndex > 3?(this.props.curIndex-3)*-100:0) + 'px'}}>
							{aLi}
						</ul>
					</div>
				)
			}
		}

		class MyTab extends React.Component {
			constructor() {
				super();
				this.state = {
					picNames: null,
					index: 0,
					iScale: 1
				}
			}

			componentWillMount() {
				if (this.props.data.texts && this.props.data.texts.length > 0) {
					this.setState({
						picNames: this.props.data.texts
					})
				}else {
					let picNames = [];
					this.props.data.pics.forEach((value,index) => {
						picNames.push(value.replace(/\\/g, '/').substring(value.lastIndexOf("/") + 1));
					})
					this.setState({
						picNames: picNames
					})
				}
			}

			render() {
				return (
					<div className="outBOx">
						<TopNode picUrl={this.props.data.pics} curIndex={this.state.index} topLeftMove={this.topLeftMove.bind(this)} topRightMove={this.topRightMove.bind(this)} iScale={this.state.iScale} />
						<CenterNode picNames={this.state.picNames} curIndex={this.state.index} topScaleBig={this.topScaleBig.bind(this)} topScaleSmall={this.topScaleSmall.bind(this)} />
						<BottomNode picUrl={this.props.data.pics} curIndex={this.state.index} swiperChange={this.bottomChange.bind(this)}/>
					</div>
				)
			}


			bottomChange(val, e) {
				this.setState({
					index: val,
					iScale: 1
				})
			}

			topLeftMove(val, e) {
				let index = this.state.index;
				index--
				index <= 0 && (index = 0);
				this.setState({
					index: index,
					iScale: 1
				})
			}

			topRightMove(val, e) {
				let index = this.state.index;
				index++
				index >= this.props.data.pics.length && (index = this.props.data.pics.length - 1)
				this.setState({
					index: index,
					iScale: 1
				})
			}

			topScaleBig() {
				let scale = this.state.iScale + 0.1;
				scale >= 10 && (scale = 10);
				this.setState({
					iScale: scale
				})
			}

			topScaleSmall() {
				let scale = this.state.iScale - 0.1;
				scale <= 0.5 && (scale = 0.5)
				this.setState({
					iScale: scale
				})
			}
		}

		let data = {
			pics: ['./imgs/1.jpeg', './imgs/2.jpeg', './imgs/3.jpg', './imgs/4.jpg', './imgs/5.jpg', './imgs/6.jpg']		
		}

		ReactDOM.render(<MyTab data={data} />, app);
	</script>

</body>
</html> 